<script lang="ts" setup>
	import { ref,reactive,onMounted,getCurrentInstance } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'

	import {
		userStore
	} from '@/pinia';
	const router = useRouter()
	let datetimeShow = ref(false);
	let datetime = ref('')
	let pickerShow = ref(false)
	let sexList = ref([['男', '女']])
	let timeConfirm = (e) => {
		console.log(e);
		datetimeShow.value = false
	}
	let sexConfirm = (e) => {
		console.log(e);
		state.userInfo.gender = e.value[0]
		getMeiyeRecruitHrInfo3Edit()
	}
	const {
		proxy
	} = getCurrentInstance()
	
	
	const userStoreInfo = userStore();

	let avatarClick = () => {
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: proxy.$uploadUrl + proxy.$api.uploadFile,
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {
						'file': tempFilePaths[0],
					},
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).result);
						state.userInfo.headImage = JSON.parse(uploadFileRes.data).result;
						getMeiyeRecruitHrInfo3Edit()
	
					}
				});
			}
		});
	}
	let state= reactive({
		type:'',
		showModal:false,
		modalTitle:'',
		form:{
			title:''
		},
		userInfo:{}
	})
	
	let showModalFun = (type)=>{
		state.type = type
		
		if(type == 'username'){
			state.form.title = state.userInfo.username
			state.modalTitle ="昵称"
			state.showModal = true
		}else if(type == 'phone'){
			state.form.title = state.userInfo.phone
			state.modalTitle ="电话"
			state.showModal = true
		}else if(type == 'wechatNumber'){
			state.form.title = state.userInfo.wechatNumber
			state.modalTitle ="微信号"
			state.showModal = true
		}else if(type == 'post'){
			state.form.title = state.userInfo.post
			state.modalTitle ="职位"
			state.showModal = true
		}else{
			// companyId:state.userInfo.companyId,
			router.push({
				name:'companyDetail',
				params:{
					companyId:state.userInfo.companyId,
					type:'edit'
				}
			})
			// state.modalTitle ="公司信息"
		}
		
		
	}
	let confirmModal=()=>{
		if(state.type == 'username'){
			state.userInfo.username = state.form.title
		}else if(state.type == 'phone'){
			state.userInfo.phone = state.form.title
		}else if(state.type == 'wechatNumber'){
			state.userInfo.wechatNumber = state.form.title
		}else if(state.type == 'post'){
			state.userInfo.post = state.form.title
		}
		
		getMeiyeRecruitHrInfo3Edit()
		
	}
	let cancelModal = ()=>{
		state.showModal = false
	}
	
	const getMeiyeRecruitHrInfo3QueryById = ()=>{
		proxy.$req('GET', proxy.$api.meiyeRecruitHrInfo3QueryById, {id:userStoreInfo.userInfo.id}).then((res) => {
			console.log(res);
			if(res.code === 200){
				state.userInfo = res.result
			}
		})
	}
	
	const getMeiyeRecruitHrInfo3Edit = ()=>{
		proxy.$req('POST', proxy.$api.meiyeRecruitHrInfo3Edit, state.userInfo).then((res) => {
			console.log(res);
			if(res.code === 200){
				state.showModal = false
				pickerShow.value = false
				getMeiyeRecruitHrInfo3QueryById()
				// state.userInfo = res.result
			}
		})
	}
	
	onMounted(()=>{
		getMeiyeRecruitHrInfo3QueryById()
	})
	
	
</script>
<template>
	<u-navbar class="navbar"  bgColor="rgba(255, 255, 255, 0)" :placeholder="true" title="" :autoBack="true">
		<template #center>
			<view style="font-weight: 600;font-size: 36rpx;">设置</view>
		</template>
	</u-navbar>
	<view class="avatar">
		<image @click="avatarClick" :src="state.userInfo.headImage" mode=""></image>
		<text class="editTitle" @click="avatarClick">更换头像</text>
	</view>
	<view class="main">
		<view class="function" @click="showModalFun('username')">
			<text class="title">昵称</text>
			<view class="funcItem">
				<text>{{state.userInfo.username}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="function" @click="pickerShow=true">
			<text class="title">性别</text>
			<view class="funcItem">
				<text>{{state.userInfo.gender }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="function" @click="showModalFun('phone')">
			<text class="title">电话</text>
			<view class="funcItem">
				<text>{{state.userInfo.phone }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="function" @click="showModalFun('wechatNumber')">
			<text class="title">微信号</text>
			<view class="funcItem">
				<text>{{state.userInfo.wechatNumber }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="function" @click="showModalFun('company')">
			<text class="title">公司信息</text>
			<view class="funcItem">
				<text>{{state.userInfo.companyName}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="function" @click="showModalFun('post')">
			<text class="title">职位</text>
			<view class="funcItem">
				<text>{{state.userInfo.post }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	<!-- 	<view class="function" @click="datetimeShow=true">
			<text class="title">出生日期</text>
			<view class="funcItem">
				<text>2020-12-45</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view> -->
	</view>
	<u-datetime-picker :show="datetimeShow" v-model="datetime" mode="date" :minDate="14539098"
		@cancel="datetimeShow=false" @confirm="timeConfirm"></u-datetime-picker>
	<u-picker :show="pickerShow" :columns="sexList" @cancel="pickerShow=false" @confirm="sexConfirm"></u-picker>
	
	<u-modal :show="state.showModal" :title="state.modalTitle" :showCancelButton='true' @cancel="cancelModal" @confirm="confirmModal">
		<view class="slot-content contentBox">
			<u--form :model="state.form" ref="form1" labelWidth="100">
				<u-form-item class="formItem" label="" prop="title" v-if="state.type==='username'">
					<template #label>
						<view class="r-flex-between-center">
							<view class="labelName">
								<text>昵称：</text>
							</view>
						</view>
					</template>
					<u--input v-model="state.form.title" border="none" placeholder="请填写昵称"></u--input>
				</u-form-item>
				<u-form-item class="formItem" label="" prop="title" v-if="state.type==='post'">
					<template #label>
						<view class="r-flex-between-center">
							<view class="labelName">
								<text>职位：</text>
							</view>
						</view>
					</template>
					<u--input v-model="state.form.title" border="none" placeholder="请填写职位名称"></u--input>
				</u-form-item>
				<u-form-item class="formItem" label="" prop="title" v-if="state.type==='phone'">
					<template #label>
						<view class="r-flex-between-center">
							<view class="labelName">
								<text>电话：</text>
							</view>
						</view>
					</template>
					<u--input v-model="state.form.title" border="none" placeholder="请填写"></u--input>
				</u-form-item>
				<u-form-item class="formItem" label="" prop="title" v-if="state.type==='wechatNumber'">
					<template #label>
						<view class="r-flex-between-center">
							<view class="labelName">
								<text>微信号：</text>
							</view>
						</view>
					</template>
					<u--input v-model="state.form.title" border="none" placeholder="请填写"></u--input>
				</u-form-item>
			</u--form>
		</view>
	</u-modal>
</template>
<style lang="scss" scoped>
	page {
		background-color: #f1f3f4;
	}
	.main{
		background-color: #f1f3f4;
		// width: 686rpx;
		// height: 340rpx;
		// box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.04);
		border-radius: 24rpx;
		margin: 0 auto;
		// padding: 5rpx 0;
		box-sizing: border-box;
	}

	.function {
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom:20rpx;
		.title{
			font-size: 32rpx;
			// font-weight: 600;
		}
		.funcItem {
			display: flex;
			align-items: center;
			text{
				margin-right: 10rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.85);
			}
		}
	}

	.avatar {
		// width: calc(100% - 60rpx);
		padding: 30rpx 30rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background:#fff;
		border-top:2rpx solid #eee;
		margin-bottom:20rpx;
		.editTitle{
			margin-top: 10rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0,0,0,0.45);
		}
		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 100rpx;
		}
	}
	
	.contentBox{
		width:100%;
		.labelName{
			margin-right:20rpx;
		}
	}
</style>